<template>
    <el-container direction="vertical">
        <Header :show-history="true"/>
        <el-container class="auto-width" direction="vertical">
            <el-input type="text" v-model="keyword" autocomplete="off" placeholder="请输入关键词" @keyup.enter.native="loadVideo">
                <el-button slot="append" icon="el-icon-search" title="搜索" @click="loadVideo"></el-button>
            </el-input>
            <el-row id="video-list">
                <el-col v-for="vod in videos" :key="vod.id">
                    <div class="video-img" :style="`background-image: url('${vod.pic}')`" @click="loadVod(vod.id)"></div>
                    <el-link :underline="false" @click="loadVod(vod.id)" :title="vod.name">{{vod.name}}</el-link>
                </el-col>
            </el-row>
            <el-pagination
                    style="margin: 20px auto 0 auto"
                    background
                    :pager-count="5"
                    :hide-on-single-page="true"
                    :total="videoCount"
                    :page-size="pageSize"
                    :current-page.sync="page"
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next">
            </el-pagination>
        </el-container>
        <Footer/>
    </el-container>
</template>

<script>
    import Header from '../components/Header';
    import Footer from "../components/Footer";
    import Loading from "../utils/loading";
    import VideoService from '../services/video.service';

    export default {
        name: 'Search',
        components: {
            Footer,
            Header,
        },

        data() {
            return {
                keyword: '',
                page: 1,
                pageSize: 30,
                videoCount: 0,
                videos: [],
            };
        },

        methods: {

            handleCurrentChange(val) {
                this.page = val;
                this.loadVideo();
            },

            async loadVideo() {
                if (this.keyword.trim().length === 0) {
                    this.$message.error('关键词不能为空!');
                    return false;
                }
                Loading.showLoad('加载中...');
                let res = await VideoService.search(this.keyword.trim(), this.page, this.pageSize);
                if (res.code === 0) {
                    this.$message.error(res.msg);
                    Loading.hideLoad();
                    return false;
                }
                this.videoCount = res.data.count;
                this.videos = res.data.rows;
                Loading.hideLoad();
                document.querySelector("#app").scrollIntoView(true);
                return false;
            },

            loadVod(vid) {
                const routeData = this.$router.resolve({
                    name: 'detail',
                    query: {
                        id: vid,
                    },
                });
                window.open(routeData.href, '_blank');
            },
        },

        async mounted() {
        },
    };
</script>

<style scoped lang="scss">
    @import "~element-ui/packages/theme-chalk/src/mixins/mixins";

    #site-class > .el-button {
        & + .el-button {
            margin-left: 0px !important;
        }

        margin-right: 5px !important;
        margin-bottom: 5px !important;
    }

    #video-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: center;
        margin-top: 8px;
    }

    #video-list > .el-col > .el-link {
        width: 100%;

        ::v-deep span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }


    #video-list > .el-col > .video-img {
        width: 100%;
        padding-top: 125%;
        background-position: 50% 50%;
        background-size: cover;
        margin-bottom: 5px;
        cursor: pointer;
        background-color: #eee;
    }

    #video-list > .el-col {
        // <768px
        @include res(xs) {
            width: (100 / 2) * 1% !important;
        }
        // ≥768px
        @include res(sm) {
            width: (100 / 4) * 1% !important;
        }
        // ≥992px
        @include res(md) {
            width: (100 / 6) * 1% !important;
        }
        padding: 2px;
        margin-bottom: 10px;
        text-align: center;
    }

</style>
